<template>
  <div class="app-container">
    
    <el-row :gutter="20">
      <el-col :span="4">
        <el-card class="app-card" shadow="hover" @click="navigateTo('dataset')">
          <div class="app-icon">
            <el-icon><DataAnalysis /></el-icon>
          </div>
          <div class="app-info">
            <h3>工业智能体</h3>
            <p>管理工业企业</p>
          </div>
        </el-card>
      </el-col>
      
      <!-- <el-col :span="8">
        <el-card class="app-card" shadow="hover" @click="navigateTo('chat')">
          <div class="app-icon">
            <el-icon><ChatDotRound /></el-icon>
          </div>
          <div class="app-info">
            <h3>AI对话</h3>
            <p>基于企业知识的智能助手，快速解答问题</p>
          </div>
        </el-card>
      </el-col>
       <el-col :span="8">
        <el-card class="app-card" shadow="hover" @click="navigateTo('chat')">
          <div class="app-icon">
            <el-icon><ChatDotRound /></el-icon>
          </div>
          <div class="app-info">
            <h3>AI对话</h3>
            <p>基于企业知识的智能助手，快速解答问题</p>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="8">
        <el-card class="app-card coming-soon" shadow="hover">
          <div class="app-icon">
            <el-icon><OfficeBuilding /></el-icon>
          </div>
          <div class="app-info">
            <h3>数字工厂</h3>
            <p>即将推出，敬请期待</p>
            <div class="coming-soon-badge">即将推出</div>
          </div>
        </el-card>
      </el-col> -->
    </el-row>
    
    <!-- <div class="section">
      <h3 class="section-title">最近使用</h3>
      <el-table :data="recentUsage" style="width: 100%">
        <el-table-column prop="appName" label="应用名称" />
        <el-table-column prop="lastUsed" label="最近使用时间" />
        <el-table-column prop="usageCount" label="使用次数" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button link type="primary" @click="navigateTo(scope.row.path)">进入</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div> -->
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { DataAnalysis, ChatDotRound, OfficeBuilding } from '@element-plus/icons-vue'

const router = useRouter()

// 最近使用数据
const recentUsage = ref([
  { appName: '知识库', lastUsed: '2023-05-20 15:30', usageCount: 25, path: 'dataset' },
  { appName: 'AI对话', lastUsed: '2023-05-19 10:15', usageCount: 18, path: 'chat' }
])

// 导航到应用
function navigateTo(path) {
    console.log(router)
    // console.log(path)
  router.push(`/knowledge/${path}`)
  console.log(router)
}
</script>

<style scoped>
.app-container{
  background: #f6f8f9;
  height: 100vh;
}
.page-title {
  margin-bottom: 24px;
  font-weight: 600;
  color: #303133;
}

.app-card {
  height: 160px;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  /* border: 1px solid rgba(0, 0, 0, .3); */
}

.app-card:hover {
  /* transform: translateY(-5px); */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.app-icon {
  font-size: 48px;
  margin-bottom: 16px;
  color: #409EFF;
}

.app-info h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: #303133;
}

.app-info p {
  margin: 0;
  color: #909399;
  font-size: 14px;
}

.coming-soon {
  opacity: 0.7;
  background-color: #f5f7fa;
}

.coming-soon-badge {
  position: absolute;
  top: 12px;
  right: -30px;
  transform: rotate(45deg);
  background-color: #E6A23C;
  color: white;
  padding: 2px 30px;
  font-size: 12px;
}

.section {
  margin-top: 32px;
}

.section-title {
  margin-bottom: 16px;
  font-weight: 500;
  color: #303133;
}
</style>